<template>
    <div class="portList">
        <Card :bordered="false" dis-hover class="ivu-mt" style="height:calc(100vh - 150px)">
            <Row :gutter="12">
                <Col span="5" style="height:calc(100vh - 180px);overflow:auto;">
                    <Tree ref="tree" children-key="child" :data="treeList" @on-select-change="treeChange"></Tree>
                </Col>
                <Col span="19">
                    <div class="">
                        <Form ref="form" :model="searchForm">
                            <Row :gutter="24" type="flex">
                                <Col span="6">
                                    <Input v-model="searchForm.keywords" placeholder="请输入患者姓名/诊疗号" element-id="keywords" clearable @on-enter="askData"  @on-clear="askData"/>
                                </Col>
                                <Col span="4">
                                    <Select v-model="searchForm.clinic_id" placeholder="选择诊室" element-id="clinic_id" clearable @on-change="askData" @on-clear="askData">
                                        <Option v-for="items in rooms" :key="items.id" :value="items.id">{{items.name}}</Option>
                                    </Select>
                                </Col>
                                <Col span="10">
                                    <FormItem label="剩余" class="shengyu"> 
                                        <InputNumber  v-model="searchForm.min_num" :min="-999" placeholder="最小值" :max="9999" element-id="min_num" style="width:60px" clearable @on-blur="changeMin"/> -
                                        <InputNumber  v-model="searchForm.max_num" :min="-999" placeholder="最大值" :max="9999" element-id="max_num" style="width:60px" clearable @on-blur="changeMax"/>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                    <div class="i-table-no-border">
                        <Table border size="small" ref="table" :columns="columns" :data="data" :loading="loading">
                            <template slot-scope="{ row }" slot="hospital">
                                <span>{{row.name}} {{row.gender_str}} {{row.age}}</span>
                                
                            </template>
                        </Table>
                        <div class="ivu-mt ivu-text-center">
                            <Page
                                :total="total"
                                :current.sync="page"
                                show-total
                                show-elevator
                                :page-size="pageSize"
                                @on-change="changePage"
                                :page-size-opts="pageOpts"
                                show-sizer transfer
                                @on-page-size-change="changePageSize"
                            />
                        </div>
                    </div>
                </Col>
            </Row>
        </Card>        
    </div>
</template>
<script>
    import { getProjectList,treamentUserList,drugUserList} from '@api/treatment';
    export default {
        name: 'treatment',
        data () {
            return {
                loading: false,
                page:1,
                pageSize: 10,
                total:0,
                pageOpts: [10, 20, 30, 50],
                columns: [
                    {
                        title: '基本信息',
                        // key: 'name',
                        slot: 'hospital',
                        minWidth: 130
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        minWidth: 118
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 118
                    },
                    {
                        title: '购买量',
                        key: 'buy_num',
                        minWidth: 117
                    },
                    {
                        title: '治疗量',
                        key: 'treatment_num',
                        minWidth: 119
                    },
                    {
                        title: '剩余',
                        key: 'surplus_num',
                        minWidth: 118
                    }
                ],
                data: [],
                searchForm: {
                    id: '',
                    keywords: '',
                    clinic_id: '',
                    min_num: null, 
                    max_num: null
                },
                treeList: [],
                rooms:[],
                searchType:1
            }
        },
        created () {
            this.getTree()
        },
        methods: {
            changeMin(){
                if(this.searchForm.min_num!=null&&this.searchForm.max_num!=null&&this.searchForm.max_num<this.searchForm.min_num){
                    this.searchForm.min_num=this.searchForm.max_num
                }
                this.askData()
            },
            changeMax(){
                if(this.searchForm.max_num!=null&&this.searchForm.min_num!=null&&this.searchForm.max_num<this.searchForm.min_num){
                    this.searchForm.max_num=this.searchForm.min_num
                }
                this.askData()
            },
            cheangeAreaData(data) {
				for (var i = 0; i < data.length; i++) {
					for (var j in data[i]) {
						if (j == "name") {                            
							data[i]["title"] = data[i].name;
							delete data[i].name;
						}
						if (j == "child") {
							if (data[i].child) {
								if (data[i].child.length > 0) {
                                    data[i].disabled=true
									this.cheangeAreaData(data[i].child)
								}
							} else {
								delete data[i].child;
							}

						}
					}
				}
			},
            getTree () {
                getProjectList().then(res => {
                    var manu = [...res.clinic_project.concat(res.drug)]
                    manu[0].expand=true
                    if(manu[0]['child']&&manu[0]['child'].length>0){
                        manu[0]['child'][0]['selected']=true
                        this.searchForm.id=manu[0]['child'][0]['id']
                    }
                    this.treeList=manu
                    this.cheangeAreaData(this.treeList)    
                    this.rooms=res.condition.clinic_list                                                    
                    this.onLoad()
                })
            },
            onLoad () {
                this.loading = true
                const params = this.getParam()
                if(this.searchType==1){
                    treamentUserList(params).then((res) => {
                        this.data = res.list
                        this.total = res.total
                    }).finally(() => {
                        this.loading = false
                    })
                }else if(this.searchType==2){
                    drugUserList(params).then((res) => {
                        this.data = res.list
                        this.total = res.total
                    }).finally(() => {
                        this.loading = false
                    })
                }
                
            },
            getParam () {
                let param = {
                    page: this.page,
                    pageSize: this.pageSize
                }
                param = Object.assign(param, this.searchForm)
                return param
            },
            askData(){
               this.page=1
                this.onLoad();
            },
            changePage (page) {
                this.page = page;
                this.onLoad();
            },
            changePageSize (pagesize) {
                this.pageSize = pagesize;
                this.onLoad();
            },
            // 点击树获取对应数据
            treeChange (node, item, e, i) {                
                if(this.searchForm.id==item.id){
                    item.selected=true
                    return false;
                    console.log(item)
                }
                this.searchType=item.type
                if (node.length > 0) {
                    // 点击树
                    this.searchForm.id = item.id
                    this.onLoad()
                }else {
                    // 点击取消树
                     this.searchForm.id = ''
                    this.onLoad()
                }
            }
        }
    }
</script>
<style scoped lang="less">
   /deep/.shengyu .ivu-input-number-handler-wrap{
        display: none;
    }
</style>
